<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="text-align: center;">
        <canvas id="clock" width="400" height="400">不支持</canvas>

        <canvas id="imgCanvas" width="400" height="400"></canvas>

        <div onclick="saveImg()">保存</div>
        <img src="./css.jpg" id="img" alt="">
    </div>
    <script>
        const canvas = document.getElementById("clock");
        const context = canvas.getContext("2d");
               
        const FONT_HEIGHT = 15;// 字体大小
        const MARGIN = 35; // 边距
        const HAND_TRUNCATION = canvas.width/12; // 分钟需要减去的半径
        const HOUR_HAND_TRUNCATION = canvas.width/10;// 小时针需要减去的半径
        const NUMBER_SPACING = 20; // 数字间距
        const RADIUS = canvas.width/2 - MARGIN; // 半径
        const HAND_RADIUS = RADIUS + NUMBER_SPACING; // 指针半径（数字间距）

        function drawCircle() {
            context.beginPath();
            context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI * 2, true);
            context.stroke();       
        }

        function drawCenter() {
            context.beginPath();
            context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI * 2, true);
            context.fill();
        }

        // 绘制数字
        function drawNumbers(){
            var numberals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            var angle = 0;
            var numeralWidth = 0;
            numberals.forEach(function(numeral){
                angle = Math.PI/6 * (numeral - 3);
                // 填充文字
                numeralWidth = context.measureText(numeral).width;
                context.fillText(numeral,
                    canvas.width/2 + Math.cos(angle)*(HAND_RADIUS)
                        - numeralWidth/2,
                    canvas.height/2 + Math.sin(angle)*(HAND_RADIUS)
                        + FONT_HEIGHT/3
                );
                // 绘制刻度 
                context.moveTo(canvas.width/2 + Math.cos(angle)*(RADIUS -5),
                            canvas.height/2 + Math.sin(angle)*(RADIUS -5));
                context.lineTo(canvas.width/2 + Math.cos(angle)*(RADIUS),
                        canvas.height/2 + Math.sin(angle)*(RADIUS));
                context.stroke();   
            });
        }
 
        // 绘制指针
        function drawHand(loc, isHour , isMin){
            var angle = (Math.PI * 2) * (loc/60) - Math.PI/2;
            var handRadius = isHour? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION
                                    : (isMin ? (RADIUS - HAND_TRUNCATION) : (RADIUS * 0.95));
            context.moveTo(canvas.width/2, canvas.height/2);
            context.lineTo(canvas.width/2 + Math.cos(angle) * handRadius,
                            canvas.height/2 + Math.sin(angle) * handRadius);
            context.stroke();
        }
        
        // 绘制所有指针
        function drawHands(){
            var date = new Date;
            var hour = date.getHours();
            hour = hour >12 ? hour - 12 : hour;
            // 绘制小时指针
            drawHand((hour + date.getMinutes()/60)*5, true,false);
            // 绘制分钟指针
            drawHand(date.getMinutes(),false,true);
            // 绘制秒指针
            drawHand(date.getSeconds(),false,false);
        }
        
        // 画钟
        function drawClock(){
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawCircle();
            drawCenter();
            drawNumbers();
            drawHands();
        }
        
        context.font = FONT_HEIGHT + 'px Arial';
        context.fillStyle='red';
        loop = setInterval(drawClock, 1000);

        function saveImg() {
            let img =canvas.toDataURL('image/png',1);
            document.getElementById("img").src=img
        }

        const canvas2 = document.getElementById("imgCanvas")
        const ctx2 = canvas2.getContext("2d")
        
        // let dx=0,dy=0,dw=300,dh=225
        // let img = new Image();
        // img.src = "./css2.png"
        // img.onload = (e) => {
        //     console.log(e.path[0].src)
        //     drawImg(e.path[0].src) 
        // }

        // function drawImg(path) {
        //     ctx2.drawImage("./css2.png", dx, dy, dw, dh);
        //     ctx2.draw()
        // }
        

    </script>
</body>
</html>